<template>
  <div class="container" style="padding-bottom: 50px">
    <van-sticky>
      <van-search
        disabled
        v-model="keyword"
        placeholder="请输入搜索关键词"
        @click="goto('/search?keyword=' + keyword)"
      >
      </van-search>
    </van-sticky>
    <div class="home-item">
      <div style="overflow: hidden; margin: 10px 0px">
        <h4 style="float: left; margin: 0px; margin-right: 5px">今日推荐</h4>
        <span style="float: left; font-size: 12px; color: #969799"
          >每天都有新发现</span
        >
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in swipeDate"
          :key="item.goods_id"
          @click="gotoDetail(item.goods_id)"
          style="height: 150px"
        >
          <van-image height="100%" fit="cover" :src="item.goods_small_logo" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="hotGoods">
      <div class="p-10" style="background: #fff">
        <div style="overflow: hidden; margin: 10px 0px">
          <div
            style="
              height: 100%;
              width: 5px;
              border-right: 5px solid #f00;
              float: left;
              background: red;
              margin-right: 5px;
            "
          ></div>
          <h4 style="float: left; margin: 0px; margin-right: 5px">热销榜</h4>
          <span style="float: left; font-size: 12px; color: #969799"
            >每日热销指南</span
          >
          <van-button
            round
            type="info"
            plain
            style="float: right; height: 20px"
            @click="goMore('hotsale')"
            >更多</van-button
          >
        </div>
      </div>
      <div
        class=""
        style="
          display: flex;
          overflow: auto;
          background: #fff;
          padding-left: 10px;
        "
      >
        <div
          class="goodsitem"
          v-for="item in hotData"
          :key="item.goods_id"
          style="margin-right: 10px"
        >
          <van-image
            width="100"
            height="100"
            :src="item.goods_small_logo"
            @click="gotoDetail(item.goods_id)"
          />
          <p
            style="
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            "
          >
            <span style="font-size: 16px; color: #f00"
              >￥{{ item.goods_price }}</span
            >
            {{ item.goods_name }}
          </p>
        </div>
      </div>
    </div>
    <div class="brandGoods">
      <div class="p-10" style="background: #fff">
        <div style="overflow: hidden; margin: 10px 0px">
          <div
            style="
              height: 100%;
              width: 5px;
              border-right: 5px solid #f00;
              float: left;
              background: red;
              margin-right: 5px;
            "
          ></div>
          <h4 style="float: left; margin: 0px; margin-right: 5px">大牌直售</h4>
          <span style="float: left; font-size: 12px; color: #969799"
            >品牌商品放心购</span
          >
          <van-button
            round
            type="info"
            plain
            style="float: right; height: 20px"
            @click="goMore('brand')"
            >更多</van-button
          >
        </div>
      </div>
      <div
        class=""
        style="
          display: flex;
          overflow: auto;
          background: #fff;
          padding-left: 10px;
        "
      >
        <div
          class="goodsitem"
          v-for="item in brandData"
          :key="item.goods_id"
          style="margin-right: 10px"
        >
          <van-image
            width="100"
            height="100"
            :src="item.goods_small_logo"
            @click="gotoDetail(item.goods_id)"
          />
          <p
            style="
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            "
          >
            <span style="font-size: 16px; color: #f00"
              >￥{{ item.goods_price }}</span
            >
            {{ item.goods_name }}
          </p>
        </div>
      </div>
    </div>
    <div class="allGoods">
      <div class="p-10" style="background: #fff">
        <div style="overflow: hidden; margin: 10px 0px">
          <div
            style="
              height: 100%;
              width: 5px;
              border-right: 5px solid #f00;
              float: left;
              background: red;
              margin-right: 5px;
            "
          ></div>
          <h4 style="float: left; margin: 0px; margin-right: 5px">全部商品</h4>
          <span style="float: left; font-size: 12px; color: #969799"
            >海量商品随心购</span
          >
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          style="padding-bottom: 50px; display: flex; flex-wrap: wrap"
        >
          <van-cell
            v-for="(item, index) in list"
            :key="index + '' + item.goods_id"
            style="text-align: left; width: 50%"
            @click="gotoDetail(item.goods_id)"
          >
            <template #icon>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <van-image
                  width="100px"
                  height="100px"
                  :src="item.goods_small_logo"
                />
                <div
                  style="
                    flex:1
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                  "
                >
                  <span style="font-size: 20px; color: red; margin-right: 10px"
                    >￥{{ item.goods_price }}</span
                  >{{ item.goods_name }}
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
    </div>
    <div class="backTop" @click="goTop" v-show="isShow">
      <van-icon name="back-top" style="line-height: 30px; font-weight: 700px" />
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      keyword: "",
      swipeDate: "",
      hotData: "",
      brandData: "",
      //全部商品
      list: [],
      loading: false,
      finished: false,
      page: 1,
      isShow: false,
    };
  },
  created() {
    this.$request.get("/recommend").then(({ data }) => {
      this.swipeDate = data.data;
    });
    this.$request
      .get("/hotsale", {
        params: {
          limit: 10,
          page: 1,
        },
      })
      .then(({ data }) => {
        this.hotData = data.data;
      });
    this.$request
      .get("/brand", {
        params: {
          limit: 10,
          page: 1,
        },
      })
      .then(({ data }) => {
        this.brandData = data.data;
      });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    goto(url) {
      this.$router.push(url);
    },
    gotoDetail(id) {
      this.goto("/goods/" + id);
    },
    goMore(type) {
      this.goto("/more/" + type);
    },
    onLoad() {
      if (!this.finished) {
        this.page++;
        this.getData();
      }
    },
    async getData() {
      this.loading = true;
      this.finished = false;
      const { data } = await this.$request.get("/discover", {
        params: {
          limit: 10,
          page: this.page,
        },
      });
      this.list.push(...data.data);
      this.loading = false;
      if (this.list.length >= data.total) {
        this.finished = true;
      }
    },
    goTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 300) {
        this.isShow = true;
      } else if (scrollTop < 300) {
        this.isShow = false;
      }
    },
  },
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.p-10 {
  padding: 10px;
}
.home-item {
  padding: 10px;
  background: #fff;
}
.backTop {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: fixed;
  background: pink;
  right: 30px;
  bottom: 80px;
  z-index: 9999;
}
::v-deep .van-list__loading {
  width: 100%;
}
</style>